<template>
  <div class="app-container">
    <el-container style="position: relative; height: 100%">
      <el-aside width="300px">
        <el-tree
          style="position: absolute; width: 300px"
          :data="titleList"
          :props="defaultProps"
          default-expand-all
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <a :href="'#' + node.label">{{ node.label }}</a>
          </span>
        </el-tree>
      </el-aside>
      <el-main>
        <Markdown id="content" :source="doc" highlight />
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import doc from "/public/DMOE/index.md";
import Markdown from "@/components/Markdown/index.vue";
export default {
  name: "Documentation",
  components: { Markdown },
  data() {
    return {
      doc,
      articleList: [],
      titleList: [],
      defaultProps: {
        children: "children",
        label: "content",
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.titleList = this.tete();
    }, 1000);
  },
  methods: {
    handleSearchFormSubmit(v) {
      this.sloading = true;
      setTimeout(() => {
        this.sloading = false;
        console.log(v);
      }, 1000);
    },
    tete() {
      const content = document.getElementById("content").children[0].children;
      var arr = [
        {
          content: "",
          children: [],
        },
      ];
      let h1 = 0;
      let h2 = 0;
      let h3 = 0;
      let h4 = 0;
      let h5 = 0;
      
      
      for (let i = 0; i < content.length; i++) {
        var element = { content: "", children: [] };
            console.log(content[i].localName,'2134123',content)

        if (content[i].localName === "h1") {
          element.content = content[i].innerHTML;


          if (h1 === 0) {
            arr[0] = element;
            h1++;
          } else {
            arr.push(element);
            h1++;
          }
          h2 = 0;
          h3 = 0;
          h4 = 0;
          h5 = 0;
        }
        if (content[i].localName === "h2") {
          element.content = content[i].innerHTML;
          arr[h1 - 1].children.push(element);
          h2++;
          h3 = 0;
          h4 = 0;
          h5 = 0;
        }
        if (content[i].localName === "h3") {
          element.content = content[i].innerHTML;
          arr[h1 - 1].children[h2 - 1].children.push(element);
          h3++;
          h4 = 0;
          h5 = 0;
        }
        if (content[i].localName === "h4") {
          element.content = content[i].innerHTML;
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children.push(element);
          h4++;
          h5 = 0;
        }
        if (content[i].localName === "h5") {
          element.content = content[i].innerHTML;
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children[
            h4 - 1
          ].children.push(element);
          h5++;
        }
        if (content[i].localName === "h5") {
          element.content = content[i].innerHTML;
          arr[h1 - 1].children[h2 - 1].children[h3 - 1].children[
            h4 - 1
          ].children[h5 - 1].children.push(element);
        }
      }
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
